iT邦幫忙

2024 iThome 鐵人賽

DAY 14
1
Modern Web

蓋一個自己的 Nuxt 3 UI Module系列 第 14

安裝模組工具

  • 分享至 

  • xImage
  •  

經過了好幾天的前置作業,終於要開始建立 module 啦!

安裝模組工具

我使用的是官方提供的模板與方法

  1. 執行 npx nuxi init -t module [自訂模組名稱] ,接下來 terminal 會出現一些選項,按照自己習慣的選~(我選 npm)

  2. 安裝完成後在專案資料夾內看到剛剛命名的資料夾出現了 (名稱要自己取啦嘿)

  3. 模組資料夾裡面的結構如下

    我們主要會用到兩個區塊

    • playground: 內部預覽區域,相當於使用者的 Nuxt 環境
    • src: 這裡是模組的開發區域
      • runtime 資料夾: 放開發配置,例如 assetspagesplugins 等等...
      • module.ts : module 的設定在此進行

src/module.ts

  • 先介紹 module 裡面的初始配置~
// src/module.ts
import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

// 定義給使用者的模組自訂選項類型
export interface ModuleOptions {}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'seal-module', // module 名稱,會對應 npm 的發布名稱 (這邊改了 package.json 也要記得改)
    configKey: 'sealModule',  // 如果有設定給使用者的模組自訂選項,使用者的 nuxt.config 就對應這個名稱 (如下圖)
  },
  defaults: {}, // 模組預設的選項
  setup(_options, _nuxt) {
	  // 模組的運作邏輯在此 
	  //_options 對應的就是上面的 ModuleOptions 型別
	  //_nuxt 則是呼叫 nuxt 方法,比如 hook
	  
	  
    const resolver = createResolver(import.meta.url) // createResolver 獲取 modules 內的相對路徑,接下來會很常用到~

	  // 安裝套件
    addPlugin(resolver.resolve('./runtime/plugin'))
  },
})

meta.configKey 的對應關係

meta.configKey 的對應關係

安裝完成之後就將 terminal 的路徑移動到模組開發資料夾下,第一次使用請先執行 npm run dev:prepare 讓它準備 local 端的文件,接下來使用 npm run dev 準備啟動看看囉~

官方文件連結:


上一篇
元件整理
下一篇
installModule
系列文
蓋一個自己的 Nuxt 3 UI Module30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言